<template>
  <div>
    <el-form ref="editForm" :model="formItem" :rules="rules" label-width="100px" size="mini">
      <el-form-item label="服务厅局" prop="registerUnit">
        <el-select v-model="formItem.registerUnit" :disabled="disable" multiple placeholder="请服务厅局">
          <el-option v-for="item in unitLists" :key="item.unitCode" :label="item.unitName" :value="item.unitCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="formItem.startTime"
          type="date"
          :disabled="disable"
          placeholder="选择开始时间"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="formItem.endTime"
          type="date"
          :disabled="disable"
          placeholder="选择结束时间"
        />
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input
          v-model="formItem.remarks"
          placeholder="请填写备注信息"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 8 }"
          resize="none"
        />
      </el-form-item>
      <el-form-item label="客户联系人" prop="customerContact">
        <el-input v-model="formItem.customerContact" placeholder="请输入客户联系人" />
      </el-form-item>
      <el-form-item label="客户联系电话" prop="customerContactPhone">
        <el-input v-model="formItem.customerContactPhone" placeholder="请输入客户联系电话" />
      </el-form-item>
      <el-form-item label="发布任务" prop="releaseStatus">
        <el-radio-group v-model="formItem.releaseStatus" :disabled="disable">
          <el-radio :label="true">直接发布</el-radio>
          <el-radio :label="false">暂不发布</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { create, update, detail } from '@neu/dcom-ui/api/insuranceRegister'
import { list as institutionsList } from '@neu/dcom-ui/api/institutions'
import { formatDate, addDays } from '@neu/biz-core/utils/utils'
// 定义一个表单原始项
const formItem = {
  code: '',
  startTime: '',
  endTime: '',
  remarks: '',
  customerContact: '',
  customerContactPhone: '',
  releaseStatus: false,
  registerUnit: []
}
export default {
  name: 'RegisterEdit',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      // 单位集合
      unitLists: [],
      // 表单验证规则
      rules: {
        registerUnit: [{ required: true, message: '服务厅局不能为空', trigger: 'change' }],
        startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
      },
      // 判断是否可填
      disable: false
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },
  created() {
    institutionsList().then(response => {
      this.unitLists = response.data.map(e => { return { unitCode: e.code, unitName: e.name } })
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
          this.disable = this.formItem.releaseStatus
          this.formItem.registerUnit = this.formItem.registerUnit.map(e => {
            return e.unitCode
          })
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save() {
      const updated = this.id !== -1
      return new Promise(resolve => {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            const tomorrowDay = addDays(new Date(), 1)
            if (formatDate(this.formItem.startTime) < formatDate(tomorrowDay)) {
              return this.$message({
                showClose: true,
                message: '服务登记开始时间只能从后天开始选择',
                type: 'error'
              })
            }
            if (formatDate(this.formItem.startTime) > formatDate(this.formItem.endTime)) {
              return this.$message({
                showClose: true,
                message: '服务登记开始时间不能大于服务登记结束时间',
                type: 'error'
              })
            }
            this.formItem.startTime = formatDate(this.formItem.startTime)
            this.formItem.endTime = formatDate(this.formItem.endTime)
            const selectUnit = this.formItem.registerUnit.map(k => {
              const one = this.unitLists.find(e => e.unitCode === k)
              return one
            })
            const { code, startTime, endTime, remarks, customerContact, customerContactPhone, releaseStatus } = this.formItem
            const saveData = { code, startTime, endTime, remarks, customerContact, customerContactPhone, releaseStatus, registerUnit: selectUnit }
            if (updated) {
              resolve(update(this.id, saveData))
            } else {
              resolve(create(saveData))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    reset() {
      this.$refs.editForm.resetFields()
    }
  }
}
</script>

